import React, { useEffect, useState } from 'react'

function Map(props) {
  const BMap = window.BMap;
  const didian = props.dd;
  useEffect(() => {
    var map = new BMap.Map("container");

    // 创建点坐标
    var point = new BMap.Point(121.3, 31.5);

    // 初始化地图，设置中心点坐标和地图级别
    map.centerAndZoom(point, 17);

    //开启鼠标滚轮缩放
    map.enableScrollWheelZoom(true);
    const myGeo = new BMap.Geocoder();
    myGeo.getPoint(didian, function (point) {
      if (point) {
        map.centerAndZoom(point, 17);
        map.addOverlay(new BMap.Marker(point));
      }
    },
    didian.split("市")[0]+"市");
  }, [didian])
  return (
    <div className="map" style={{ width: "100%", height: "900px" }}>
      <div id="container" style={{ width: "100%", height: "100%" }}></div>
    </div>
  )
}

export default Map




// import React from "react";


// 解决脚手架中全局变量访问的问题
// const BMap = window.BMap;

// class Map extends React.Component {
//   componentDidMount() {
//     this.getMap();
//   }

//   getMap = () => {
//     // 创建地图实例
//     var map = new BMap.Map("container");

//     // 创建点坐标
//     var point = new BMap.Point(121.3, 31.5);

//     // 初始化地图，设置中心点坐标和地图级别
//     map.centerAndZoom(point, 15);

//     //开启鼠标滚轮缩放
//     map.enableScrollWheelZoom(true);

//     const myGeo = new BMap.Geocoder();
//     myGeo.getPoint("北京市海淀区上地10街10号", function (point) {
//       if (point) {
//         map.centerAndZoom(point, 16);
//         map.addOverlay(new BMap.Marker(point));
//       }
//     },
//       "北京市");

//   };

//   render() {
//     return (
//       // 父容器高度都要设置
//       <div className="map" style={{ width: "100%", height: "900px" }}>
//         <div id="container" style={{ width: "100%", height: "100%" }}></div>
//       </div>
//     );
//   }
// }

// export default Map;




